// @ts-nocheck
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { CardChecklist, Trash } from 'react-bootstrap-icons';
import Container from 'react-bootstrap/Container';
import FormControl from "react-bootstrap/FormControl"
import InputGroup from "react-bootstrap/InputGroup"
import Navbar from "react-bootstrap/Navbar";
import ReactDOM from 'react-dom/client';
// import { Button } from 'bootstrap';
import Button from 'react-bootstrap/Button';
function fetchTodos() {
    return [
        { id: 1, title: "吃饭", completed: false },
        { id: 2, title: "刷牙", completed: false },
        { id: 3, title: "喝水", completed: true },
        { id: 4, title: "洗澡", completed: true },
        { id: 5, title: "睡觉", completed: false },
    ];
}

function TodoItem(props) {
    return (
        <InputGroup key={props.id}>
            <InputGroup.Checkbox checked={props.completed} onChange={props.onToggle} />
            {/* textDecoration:line-through 4px 谷歌浏览器不兼容 line-through 4px，只能使用line-through*/}
            <FormControl readOnly value={props.title} style={{ textDecoration: props.completed ? "line-through" : "none" }} />
            <Button variant="outline-danger" onClick={props.onDelete}>
                <Trash />
            </Button>
        </InputGroup>
    )
}
function App() {
    const [todos, setTodos] = useState(fetchTodos());
    return (
        <>
            <Navbar bg='dark' variant='dark'>
                <Container>
                    <Navbar.Brand href='#'><CardChecklist />待办事项</Navbar.Brand>
                </Container>
            </Navbar>
            <Container>{
                todos.map((todo) => (
                    <TodoItem key={todo.id} title={todo.title} completed={todo.completed}
                        onDelete={() => {
                            setTodos(todos.filter((x) => x.id !== todo.id))
                        }}
                        onToggle={() => {
                            setTodos(
                                todos.map((x) =>
                                    x.id === todo.id ? { ...x, completed: !x.completed } : x
                                )
                            )

                        }} />
                ))
            }
            </Container>
        </>
    );
}

// ReactDOM.createRoot(<App />, document.getElementById('root'));

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

